<script setup>
import {ref, computed, inject} from 'vue'
import {useRouter, useRoute} from 'vue-router'

const route=useRoute()
const path_list=inject('path_list')
path_list.value=[]

const month_or_year=ref('月度')
const period=ref()

const work_index=ref(70)
const work_index_status=computed(()=>{
  if(work_index.value==100) return 'success'
  if(work_index.value>=90) return ''
  if(work_index.value>=80) return 'warning'
  return 'exception'
})

const router=useRouter()
function handleIndex(){
  console.log('abc')
  router.push({path:'/index'})
}
function handleActivity(id){
  router.push({path:`activity/${id}`})
}
</script>

<template>
<div class="content">
  <div class="item">
    <div class="title">党建评价指数<el-link type="info" @:click="handleIndex">详细</el-link></div>
    <el-progress :text-inside="true" :stroke-width="25" :striped="true" :striped-flow="true" :duration="Math.floor(work_index/10)" :percentage="work_index" :format="(percentage)=>(percentage)" :status="work_index_status" @click="handleIndex"/>
  </div>
  <div class="item">
    <div class="title">党建品牌展示<el-link type="info">更多</el-link></div>
    <el-carousel :interval="4000" type="card" height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <div class="band">{{ item }}</div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="item">
    <div class="title">党建活动展示<el-link type="info">更多</el-link></div>
    <div class="activity" @click="handleActivity(1)">
      <div class="left">
        <el-image src="/activity/1.jpeg" fit="scale-down"/>
      </div>
      <div class="right">
        <div class="abstract">市经济信息委联合市人力社保局开展“党建引领 强技赋能”联建活动</div>
        <div class="date">2024-07-25</div>
      </div>
    </div>
    <div class="activity" @click="handleActivity(2)">
      <div class="left">
        <el-image src="/activity/2.jpeg" fit="scale-down"/>
      </div>
      <div class="right">
        <div class="abstract">川渝经信党建结对共建暨菁英成长交流系列活动举办</div>
        <div class="date">2024-07-05</div>
      </div>
    </div>
    <div class="more" />
  </div>
</div>
</template>

<style lang="scss" scoped>
.content{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  .item{
    width:98%;
    margin: 10px 20px 10px 20px;
    padding: 20px;
    background-color: #fff;
    border:1px solid #eee;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    .title{
      border-bottom: solid 1px rgba(0, 0, 0, 0.2);
      font-size: 20px;
      margin-bottom:10px;
      padding-bottom:10px;
      &:before{
        content:'';
        display:inline-block;
        width:20px;
        height:20px;
        margin-right:10px;
        background-image:url('/党徽.png');
      }
      .el-link{
        font-size:16px;
        float:right;
      }
    }
    .el-progress{
      cursor: pointer;
    }
    .el-carousel__item .band {
      color: #475669;
      opacity: 0.75;
      line-height: 150px;
      margin: 0;
      text-align: center;
    }
    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
    .activity{
      cursor:pointer;
      padding:10px 0px;
      display:flex;
      border-bottom: solid 1px rgba(0, 0, 0, 0.2);
      .left{
        width:180px;
        height:120px;
        // background:url('/党建活动.png') no-repeat center;
        margin-right:10px;
      }
      .right{
        width:100%;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        .abstract{
          font-size:20px;
        }
        .date{
          color:gray;
          font-size:15px;
        }
      }
    }
    .more{
      padding:20px 0px;
      display:flex;
      background:url('/more.png') no-repeat center;
    }
  }
}
</style>
